<template>
	<div class="login">
		<div class="login-container">
			<div class="welcome">
				<div class="background"></div>
				<div class="welcome-title">Welcome Here !</div>
				<div class="welcome-subtitle">
					<div>请输入用户名和密码，</div>
					<div>登录以使用该系统。</div>
				</div>
			</div>
			<div class="form">
				<div class="form-title">欢迎登录</div>
				<div class="form-subtitle">{{ title }}企业知识库平台</div>
				<input
					v-model="loginState.username"
					@keydown.enter="toLogin"
					type="text"
					class="input"
					placeholder="登录账号"
				/>
				<input
					v-model="loginState.password"
					@keydown.enter="toLogin"
					type="password"
					class="input"
					placeholder="密码"
				/>
				<el-button class="submit" @click="toLogin" :loading="loading">登录</el-button>
			</div>
		</div>
	</div>
</template>

<script setup>
import { shallowReactive, shallowRef } from "vue"
import { ElMessage } from "element-plus"
import { useUserInfoStore } from "/store/userInfo"
import { title } from "/utils"

const userInfoStore = useUserInfoStore()
const loginState = shallowReactive({
	username: "",
	password: "",
})
if (import.meta.env.DEV) {
	loginState.username = "root"
	loginState.password = "root@123"
}
const loading = shallowRef(false)

async function toLogin() {
	if (loginState.username === "" || loginState.password === "") {
		return ElMessage.error("请输入账号或密码")
	}
	loading.value = true
	try {
		await userInfoStore.login(loginState)
		loading.value = false
	} catch (error) {
		ElMessage.error("登录失败，请检查账号或密码")
		loading.value = false
	}
}
</script>

<style lang="scss" scoped>
.login {
	background: #ecf0f3;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;

	.login-container {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		width: 1000px;
		height: 500px;
		background-color: #fff;
		box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
		border-radius: 12px;
		display: flex;
		justify-content: space-between;
		align-items: stretch;

		.welcome {
			width: 400px;
			height: 100%;
			position: relative;
			overflow: hidden;
			flex: none;
			box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #f9f9f9;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background: url("../../assets/image/login/background.png") no-repeat center top / cover, #ecf0f3;

			.background {
				position: absolute;
				z-index: 1;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				background-color: rgba(#ecf0f3, 0.4);
			}

			&::before {
				content: "";
				position: absolute;
				width: 200px;
				height: 200px;
				border-radius: 50%;
				background-color: rgba(#ecf0f3, 0.2);
				box-shadow: inset 8px 8px 12px #d1d9e6, inset -8px -8px 12px #f9f9f9;
				top: -30%;
				left: 60%;
				z-index: 2;
				backdrop-filter: blur(2px);
			}

			&::after {
				content: "";
				position: absolute;
				width: 480px;
				height: 480px;
				border-radius: 50%;
				background-color: rgba(#ecf0f3, 0.2);
				box-shadow: inset 8px 8px 12px #d1d9e6, inset -8px -8px 12px #f9f9f9;
				bottom: -60%;
				left: -60%;
				z-index: 2;
				backdrop-filter: blur(2px);
			}

			.welcome-title {
				position: relative;
				z-index: 3;
				font-size: 34px;
				font-weight: 700;
				line-height: 2.5;
				color: #181818;
			}

			.welcome-subtitle {
				position: relative;
				z-index: 3;
				font-size: 14px;
				letter-spacing: 0.25px;
				line-height: 1.6;
				color: #181818;
			}
		}

		.form {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 1000 - 400px;

			.form-title {
				font-size: 32px;
				font-weight: 700;
				color: #181818;
				text-align: center;
				padding-bottom: 15px;
			}

			.form-subtitle {
				position: relative;
				z-index: 2;
				font-size: 12px;
				letter-spacing: 0.25px;
				line-height: 1.6;
				color: #a0a5a8;
				text-align: center;
				margin-bottom: 20px;
			}

			.input {
				width: 350px;
				height: 40px;
				margin: 4px auto 10px;
				border: 1px solid #999;
				border-radius: 20px;
				padding: 20px;
			}

			.submit {
				width: 350px;
				height: 50px;
				border-radius: 25px;
				display: block;
				margin-top: 30px;
				font-size: 14px;
				letter-spacing: 1.15px;
				background-color: #075eff;
				color: #f9f9f9;
				box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
			}
		}
	}
}
</style>
